<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="secured" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<secured:authorize ifAnyGranted="ROLE_CREAR_USUARIO">
<head>
	
</head>
<body>
	<div class="contenedor grande">
		<form:form commandName="modeloUsuario" action="usuarios.do" method="post" acceptCharset="UTF-8" autocomplete="off">
			<form:hidden path="accion" />
			
			<form:errors cssClass="mensaje-error-campo" />
		
			<h2><spring:message code="etiqueta.datosUsuario" text="Datos del usuario." /></h2>
			
			<!-- PRIMER FILA -->
			<div class="campo horizontal">
      			<form:label path="apellido"><spring:message code="etiqueta.apellido" text="Apellido" />
      				<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
      			</form:label>
				
				<spring:message code="etiqueta.apellido" text="Apellido" var="placeholder" />
				<form:input path="apellido" maxlength="25" tabindex="1" placeholder="${placeholder}" autofocus="autofocus" cssClass="solo-texto" cssErrorClass="solo-texto campo-error" />
				<form:errors cssClass="mensaje-error-campo" path="apellido" />
      		</div>
      		<div class="campo horizontal">
      			<form:label path="primerNombre"><spring:message code="etiqueta.primerNombre" text="Primer nombre" />
      				<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
      			</form:label>
				
				<spring:message code="etiqueta.primerNombre" text="Primer nombre" var="placeholder" />
				<form:input path="primerNombre" maxlength="25" tabindex="2" placeholder="${placeholder}" cssClass="solo-texto" cssErrorClass="solo-texto campo-error" />
				<form:errors cssClass="mensaje-error-campo" path="primerNombre" />
      		</div>
      		<div class="campo horizontal">
      			<form:label path="correoElectronico"><spring:message code="etiqueta.correoElectronico" text="Correo electrónico" />
					<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
      			</form:label>
				
				<spring:message code="etiqueta.correoElectronico" text="Correo electrónico" var="placeholder" />
				<spring:message code="hint.correoElectronicoComoUsuario" text="Esta dirección de correo electrónico será el usuario para ingresar al sistema." var="title" />
				<form:input path="correoElectronico" maxlength="50" tabindex="3" placeholder="${placeholder}" title="${title}" cssClass="solo-email" cssErrorClass="solo-email campo-error" />
				<form:errors cssClass="mensaje-error-campo" path="correoElectronico" />
      		</div>
      		<div class="separador">
				&nbsp;
			</div>
      		
      		<!-- CREDENCIALES -->
			<h5><spring:message code="hint.reglasPassword" text="Por favor, tenga presente que su contraseña debe cumplir las siguientes condiciones:" /></h5>
			<ul>
				<li><spring:message code="regla.largo" text="Tener entre 8 y 20 caracteres." /></li>
				<li><spring:message code="regla.numero" text="Tener por lo menos un número (0-9)." /></li>
				<li><spring:message code="regla.minuscula" text="Tener por lo menos una letra minúscula (a-z)." /></li>
				<li><spring:message code="regla.mayuscula" text="Tener por lo menos una letra mayúscula (A-Z)." /></li>
				<li><spring:message code="regla.caracter" text="Tener por lo menos un caracter especial (`~!@#$%^&()-_=[{]}|&quot;;:',<.>/?)." /></li>
			</ul>
			
			<!-- SEGUNDA FILA -->
			<div class="campo horizontal">
      			<form:label path="rol"><spring:message code="etiqueta.rol" text="Rol" />
      				<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
      			</form:label>
      			<form:select path="idRol" tabindex="4" cssClass="uniform-multiselect">
					<form:options items="${roles}" itemValue="id" itemLabel="nombre"/>
				</form:select>
      		</div>
			<div class="campo horizontal">
      			<form:label path="password"><spring:message code="etiqueta.password" text="Contraseña" />
					<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
      			</form:label>
				
				<spring:message code="etiqueta.password" text="Contraseña" var="placeholder" />
				<spring:message code="hint.nuevaPassword" text="Por favor, ingrese la que será su nueva contraseña." var="title" />
				<form:password path="password" maxlength="20" tabindex="5" placeholder="${placeholder}" title="${title}"  />
				<form:errors cssClass="mensaje-error-campo" path="password" />
				
				<div class="progreso">
					<div class="barra"></div>
				</div>
				<div class="estado">
					<spring:message code="etiqueta.complejidad" text="Complejidad" />
					<span class="complejidad">0%</span>
				</div>
      		</div>
      		<div class="campo horizontal">
      			<form:label path="confirmar"><spring:message code="etiqueta.confirmarPassword" text="Confirmar contraseña" />
      				<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
      			</form:label>
				
				<spring:message code="etiqueta.confirmarPassword" text="Confirmar contraseña" var="placeholder" />
				<spring:message code="hint.confirmarPassword" text="Por favor, vuelva a ingresar la que será su nueva contraseña." var="title" />
				<form:password path="confirmar" maxlength="20" tabindex="6" placeholder="${placeholder}" title="${title}"  />
				<form:errors cssClass="mensaje-error-campo" path="confirmar" />
      		</div>
      		<div class="separador">
				&nbsp;
			</div>
      		
      		<!-- TERCER FILA -->
      		<div class="campo horizontal">
      			<form:label path="segundoNombre"><spring:message code="etiqueta.segundoNombre" text="Segundo nombre" /></form:label>
				
				<spring:message code="etiqueta.segundoNombre" text="Segundo nombre" var="placeholder" />
				<form:input path="segundoNombre" maxlength="25" tabindex="7" placeholder="${placeholder}" cssClass="solo-texto" cssErrorClass="solo-texto campo-error" />
				<form:errors cssClass="mensaje-error-campo" path="segundoNombre" />
      		</div>
			<div class="campo horizontal">
      			<form:label path="telefono"><spring:message code="etiqueta.telefonoConFormato" text="Teléfono (en formato internacional)" /></form:label>
				
				<spring:message code="etiqueta.telefono" text="Teléfono" var="placeholder" />
				<spring:message code="hint.telefonoFijo" text="Por favor, ingrese un número de teléfono fijo." var="title" />
				<form:input path="telefono" maxlength="25" tabindex="8" placeholder="${placeholder}" title="${title}" cssClass="solo-tel" cssErrorClass="solo-tel campo-error" />
				<form:errors cssClass="mensaje-error-campo" path="telefono" />
      		</div>
      		<div class="campo horizontal">
      			<form:label path="celular"><spring:message code="etiqueta.celularConFormato" text="Celular (en formato internacional)" /></form:label>
				
				<spring:message code="etiqueta.celular" text="Celular" var="placeholder" />
				<spring:message code="hint.telefonoCelular" text="Por favor, ingrese un número de teléfono móvil." var="title" />
				<form:input path="celular" maxlength="25" tabindex="9" placeholder="${placeholder}" title="${title}" cssClass="solo-tel" cssErrorClass="solo-tel campo-error" />
				<form:errors cssClass="mensaje-error-campo" path="celular" />
      		</div>
      		<div class="separador">
				&nbsp;
			</div>
      		
      		<!-- CUARTA FILA -->
      		<div class="campo comentario horizontal">
      			<form:label path="comentarios"><spring:message code="etiqueta.comentarios" text="Comentarios" /></form:label>
				
				<form:textarea path="comentarios" maxlength="500" tabindex="10" />				
      		</div>
			<div class="separador">
				&nbsp;
			</div>
      		
      		<!-- BOTONES -->
      		<button type="submit" tabindex="11"><spring:message code="etiqueta.crear" text="Crear" /></button>
			<button type="button" tabindex="12" onclick="javascript:cancelar();"><spring:message code="etiqueta.cancelar" text="Cancelar" /></button>
		</form:form>
	</div>
	
	<!-- JAVASCRIPT -->
	<script type="text/javascript">
		jQuery(document).ready(function(){

			jQuery('#password').complexify({}, function (valid, complexity) {
	            if (!valid) {
	                $('.barra').css({'width':complexity + '%'}).removeClass('valida').addClass('invalida');
	            } else {
	                $('.barra').css({'width':complexity + '%'}).removeClass('invalida').addClass('valida');
	            }
	            $('.complejidad').html(Math.round(complexity) + '%');
	        });

			jQuery("form[id=modeloUsuario]").validity(function() {
				//Requerido. Entre 2 y 25 caracteres (inclusive)
				jQuery("#primerNombre")
					.require('<spring:message code="mensaje.primerNombreRequerido" text="Por favor, ingrese el primer nombre." />')
					.minLength(2)
					.maxLength(25);
	
				//Requerido. Entre 2 y 25 caracteres (inclusive)
	        	jQuery("#apellido")
		        	.require('<spring:message code="mensaje.apellidoRequerido" text="Por favor, ingrese el apellido." />')
					.minLength(2)
					.maxLength(25);

				//Debe ser un correo electrónico válido
				jQuery("#correoElectronico")
					.require('<spring:message code="mensaje.correoElectronicoRequerido" text="Por favor, ingrese un correo electrónico." />')
					.match('email');

				//Debe ser un número de teléfono fijo válido
				jQuery('#telefono')
					.assert(function(){
						var valido = true;
						var telefono = jQuery.trim(jQuery('#telefono').val());
						if(telefono.length > 0) {
							var pais = jQuery.trim(countryForE164Number(telefono));
							if(pais.length == 0) {
								pais = region;
							}
							telefono = formatE164(pais, telefono);
							valido = isValidNumber(telefono);
							if(valido) {
								jQuery('#telefono').val(telefono);
							}
						}
						return valido;
					}, '<spring:message code="mensaje.telefonoFijoInvalido" text="Por favor, ingrese un número de teléfono fijo válido." />');

				//Debe ser un número de teléfono fijo válido
				$('#celular')
					.assert(function(){
						var valido = true;
						var celular = jQuery.trim(jQuery('#celular').val());
						if(celular.length > 0) {
							var pais = jQuery.trim(countryForE164Number(celular));
							if(pais.length == 0) {
								pais = region;
							}
							celular = formatE164(pais, celular);
							valido = isValidNumber(celular);
							if(valido) {
								jQuery('#celular').val(celular);
							}
						}
						return valido;
					}, '<spring:message code="mensaje.telefonoCelularInvalido" text="Por favor, ingrese un número de teléfono móvil válido." />');

				//Requerido. Entre 8 y 20 caracteres (inclusive)
	        	jQuery("#password")
		        	.require('<spring:message code="mensaje.passwordRequerida" text="Por favor, ingrese la contraseña." />')
					.minLength(8)
					.maxLength(20);

	        	//Requerido. Entre 8 y 20 caracteres (inclusive)
	        	jQuery("#confirmar")
		        	.require('<spring:message code="mensaje.passwordNoConfirmada" text="Debe confirmar la contraseña." />')
					.minLength(8)
					.maxLength(20);

	        	jQuery("input[type='password']")
	            	.equal('<spring:message code="mensaje.passwordDiferentes" text="Los textos ingresados no coinciden." />');
        	});
        
		});
	</script>
</body>
</secured:authorize>